<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Picker Column - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <script type="module">
    import { pickerController } from '../../../../dist/ionic/index.esm.js';
    window.pickerController = pickerController;
  </script>

<body>
  <ion-button onclick="openPicker()" id="single-column-button">Open Single Column Picker</ion-button>
  <ion-button onclick="openPicker(2, 5, multiColumnOptions)" id="multiple-column-button">Open Multi Column Picker</ion-button>
  <script>
    const defaultColumnOptions = [
      [
        'Dog',
        'Cat',
        'Bird',
        'Lizard',
        'Chinchilla'
      ]
    ]

    const multiColumnOptions = [
      [
        'Minified',
        'Responsive',
        'Full Stack',
        'Mobile First',
        'Serverless'
      ],
      [
        'Tomato',
        'Avocado',
        'Onion',
        'Potato',
        'Artichoke'
      ]
    ]

    async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions) {
      const picker = await pickerController.create({
        columns: this.getColumns(numColumns, numOptions, columnOptions),
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Confirm',
            handler: (value) => {
              console.log('Got Value', value);
            }
          }
        ]
      });

      await picker.present();
    }

    function getColumns(numColumns, numOptions, columnOptions) {
      let columns = [];
      for (let i = 0; i < numColumns; i++) {
        columns.push({
          name: `col-${i}`,
          options: this.getColumnOptions(i, numOptions, columnOptions)
        });
      }

      return columns;
    }

    function getColumnOptions(columnIndex, numOptions, columnOptions) {
      let options = [];
      for (let i = 0; i < numOptions; i++) {
        options.push({
          text: columnOptions[columnIndex][i % numOptions],
          value: i
        })
      }

      return options;
    }
  </script>
</body>
</html>
